<template>
	<div class="goods-selet__table">
		<div class="goods-selet__search">
			<el-autocomplete placeholder="请输入商品名称搜索" v-model="keyword" :trigger-on-focus="false"
				class="le-goodspage_search" size="small" :fetch-suggestions="querySearch" @select="handleSearch"
				@keyup.enter.native="handleSearch" width="100%">
				<!-- <el-button #append icon="el-icon-search" @click="handleSearch"></el-button> -->
			</el-autocomplete>
		</div>
		<el-radio-group v-model="select" @change="handleChange" v-if="self.type == 'radio'">
			<el-table ref="multipleTable" :data="weiboData">
				<el-table-column>
					<template #header>
						<span style="padding-left: 30px">原创</span>
					</template>
					<template #default="scope">
						<div class="goods-selet__table-item">
							<div class="goods-selet__table-radio">
								<el-radio :label="scope.row.id"><span></span></el-radio>
							</div>
							<div class="goods-selet__table-cover">
								<cl-image :size="80" :src="scope.row.pics" />
							</div>
							<div class="goods-selet__table-detail">
								{{ scope.row.title }}
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="类型" width="120">
					<template #default="scope"><el-tag size="mini"> {{ filterType(scope.row.type) }} </el-tag>
					</template>
				</el-table-column>
				<el-table-column  label="审核状态" width="160">
					<template #default="scope"><el-tag size="mini"> {{ filterAudit(scope.row.is_audit) }} </el-tag>
					</template>
				</el-table-column>
			</el-table>
		</el-radio-group>
		<el-table ref="multipleTable" :data="weiboData" tooltip-effect="dark" @selection-change="handleChange"
			v-if="self.type == 'checkbox'" row-key="id">
			<el-table-column type="selection" width="40" :reserve-selection="true" :selectable="selectEnable">
			</el-table-column>
			<el-table-column label="原创">
				<template #default="scope">
					<div class="goods-selet__table-item">
						<div class="goods-selet__table-cover">
							<cl-image :size="80" :src="scope.row.pics" />
						</div>
						<div class="goods-selet__table-detail">
							{{ scope.row.title }}
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="类型" width="120">
				<template #default="scope"><el-tag size="mini"> {{ filterType(scope.row.type) }} </el-tag> </template>
			</el-table-column>
			<el-table-column  label="审核状态" width="160">
				<template #default="scope"><el-tag size="mini"> {{ filterAudit(scope.row.is_audit) }} </el-tag>
				</template>
			</el-table-column>
		</el-table>
		<div class="goods-selet__goodspage">
			<el-pagination @current-change="handleSizeChange" layout="prev, pager, next,jumper" background
				:page-size="pageInfo.size" :current-page="pageInfo.page" :total="pageInfo.total"></el-pagination>
		</div>
	</div>
</template>
<script type="text/javascript">
import Picture from "/$/magic/components/image.vue";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers("magic-goods");

export default {
	components: {
		Picture
	},
	inject: ["self"],
	data() {
		return {
			select: 0,
			keyword: ""
		};
	},
	props: {
		/**
		 * 执行的上传方法
		 * @type {Object}
		 */
		limit: {
			type: Number,
			default: 1
		}
	},
	/**
	 * 计算属性
	 * @type {Object}
	 */
	computed: {
		...mapState(["weiboData", "pageInfo"])
	},
	/**
	 * 页面加载执行
	 * @return {[type]} [description]
	 */
	async mounted() {
		if (this.self.selectData) {
			this.select = this.self.selectData.id || "";
		}
		this.handleSizeChange(1);
		console.log('--->',this.weiboData);
	},
	/**
	 * 数据监听
	 * @type {Object}
	 */
	watch: {
		keyword(value) {
			if (value == "") {
				this.handleWeibo({ current: 1, keyword: { search: "" } }).then((data) => {
					this.toggleSelection(data);
				});
			}
		},
		"self.modelValue": {
			handler(newData) {
				this.self.selectData = [];
			},
			immediate: true, //刷新加载 立马触发一次handler
			deep: true // 可以深度检测到 obj 对象的属性值的变化
		}
	},
	methods: {
		...mapActions(["handleWeibo"]),
		filterType(cellValue) {
			switch (cellValue) {
				case 'media':
					return '视频'
				case 'faq':
					return '问答'
				case 'recipe':
					return '菜谱'
				case 'topic':
					return '主题'
				case 'grass':
					return '种草'
				case 'creation':
					return '原创'
				default:
					return '其他'
			}
		},
		filterAudit(cellValue) {
			switch (cellValue) {
				case 0:
					return '待审核'
				case 1:
					return '已审核'
				default:
					return '已拒绝'
			}
		},
		handleChange(arr) {
			console.log('arr--->',arr);
			if (this.self.type == "radio") {
				for (let index in this.weiboData) {
					let item = this.weiboData[index];
					if (item.id == arr) {
						this.self.selectData = JSON.parse(JSON.stringify(item));
						break;
					}
				}
			}
			if (this.self.type == "checkbox") {
				if (this.self.modelValue.length + arr.length > this.self.limit) {
					this.$message({
						message: "选多选" + this.self.limit + "件商品",
						type: "warning"
					});
				} else {
					this.self.selectData = arr;
					console.log('this.self.selectData选多选',this.self.selectData);
				}
			}
		},
		/**
		 * 处理搜索器
		 * @param  {[type]}   queryString [description]
		 * @param  {Function} cb          [description]
		 * @return {[type]}               [description]
		 */
		querySearch(queryString, cb) {
			this.handleWeibo({ ...this.pageInfo, page: 1, keyWord: this.keyword })
				.then((data) => {
					let _array = [];
					data.map((iten) => {
						_array.push({
							value: iten.title
						});
					});
					cb(_array);
				})
				.catch((error) => {
					console.error("错误提示", error);
				});
			// 调用 callback 返回建议列表的数据
		},
		createFilter(queryString) {
			return (restaurant) => {
				return restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
			};
		},
		/**
		 * [handleSearch description]
		 * @return {[type]} [description]
		 */
		handleSearch(data) {
			this.handleWeibo({ ...this.pageInfo, page: 1, keyWord: this.keyword }).then((data) => {
				this.toggleSelection(data);
			});
		},
		/**
		 * 设定选中数据
		 * @param  {[type]} rows [description]
		 * @return {[type]}      [description]
		 */
		toggleSelection(rows) { },
		/**
		 * [selectEnable description]
		 * @param  {[type]} row      [description]
		 * @param  {[type]} rowIndex [description]
		 * @return {[type]}          [description]
		 */
		selectEnable(row, rowIndex) {
			return !(this.self.modelValue && this.self.modelValue.some((item) => item.id === row.id))
		},
		/**
		 * 获取KEY
		 * @param  {[type]} row [description]
		 * @return {[type]}     [description]
		 */
		getRowKeys(row) {
			return row.id;
		},
		/**
		 * 分页
		 * @return {[type]} [description]
		 */
		handleSizeChange(e) {
			this.handleWeibo({ ...this.pageInfo, page: e }).then((data) => {
				this.toggleSelection(data);
			});
		}
	}
};
</script>
<style lang="less" scoped>
@import "./style.less";
</style>
